<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="no">
        <meta http-equiv="Pragma" content="no-cache"/> 
	    <meta http-equiv="Cache-Control" content="no-cache"/> 
	    <meta http-equiv="Expires" content="0"/>
	    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
		<link rel="stylesheet" type="text/css" href="./css/common.css"/>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<title>体温检测</title>
	</head>

	<body>
      	<header class="tc">
      		<span>来访信息登记</span>
      	</header>
      	<main>
      		<from  id="form_box" class="form_box">
      			<div><i class="iconfont icon-icon_signal"></i><input type="text" name="customerName" placeholder="请输入您的姓名(必填)" required/></div>
      			<div><i class="iconfont icon-icon_namecard"></i><input class="ipt_idNo" type="number" name="idNo" placeholder="请输入您的身份证号码(必填)" required/></div>
      			<div><i class="iconfont icon-icon_homepage"></i><input type="text" name="lifeAddress" placeholder="请输入您的单位名称(必填)" required/></div>
      			<div class="other_iconfont"><i class="iconfont icon-icon_scan_namecard"></i><input type="text" name="otherIdCode" placeholder="请输入您的其他证件号"/></div>
      			<div><textarea class="tetarea" rows="3" cols="2" placeholder="请输入来访事由"></textarea></div>
      			<div class="ipt_call"><i class="iconfont icon-icon_mobilephone"></i><input class="ipt_phone" type="text" name="phone" placeholder="请输入您的手机号(必填)" required/><button class="getCode">获取验证码</button></div>
      			<div class="ipt_call"><i class="iconfont icon-icon_dmail"></i><input class="ipt_code" type="text" name="code" placeholder="请输入6位验证码进行查行程" required/><button class="getSchedule">获取行程</button></div>
      		</from>
      		<div><button class="registe">提交信息</button></div>
      	</main>
    </body>
	<script src="./js/jquery-2.1.0.js"></script>
	<script src="./js/mui.min.js"></script>
	<script>
		var flag=true;
		var apiurl='http://pingan.gdjs.xyz:8083/HjCloud'

		//提交时，检查必填项非空
		function checkInputNull(obj){
		    var checkRes = false;
		    var errNum = 0;
		    obj.find('input:required').each(function(i){
		        $(this).removeClass('error');
		        if($(this).val()==''){
		            $(this).addClass('error');
		            errNum++;
		        }        
		    });
		    if(errNum>0){
		        checkRes = true;
		    }
		    return checkRes;
		}
		
		//电话号码正则表达式
		function telephone_all(str){
		    var lens=str.length;
		    if(str.indexOf('-')>-1){
		        var phoneArr=str.split('-');
		        var beforePhone=phoneArr[0];
		        if(beforePhone=='00852' || beforePhone=='00853'){//港澳电话
		            var reg=/([00852]|[00853])\-\d{8}/;//港澳电话
		        }else{
		            var reg=/^(0\d{2,3})-\d{7,8}$/;//中国固话
		        }
		    }else{
		        var reg = /^(13|14|15|16|17|18|19)\d{9}$/;
		    }
		    return reg.test(str);
		}
		
		//身份证号与验证码
		function idNo_code(types,str){
			if(types == 'code'){
				var code_reg = /^\d{6}$/;
				return code_reg.test(str);
			}else{
				var idNo_reg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
				return idNo_reg.test(str);
			}
		}
		
		//验证格式是否正确
		function getCheckedIpt(attrs,methods,txt){
			var checked_val = $(attrs).val();
			if(checked_val == ''){
				alert(txt + '不能为空');
				flag = true;
			}
			if(!methods(checked_val)){
				alert(txt + '格式不正确');
				flag = false;
			}else{
				flag = true;
			}
			return flag
		}

		//请求
		function postAction(url,params){
			$.ajax({
				url:apiurl + url,
				type:"POST",
				data:params,
				success:function(res){
					if(res.code == 0){
						alert('请求成功')
					}else{
						alert('请求失败')
					}
				},
				error:function(err){
					console.log(err)
				}
			});
		}

		$(function(){
			
			//是否为空
			$('input:required,input.error').on('blur',function(){
			     if($(this).val()!=''){
			         $(this).removeClass('error');
			     }
			});

			//获取验证码
			$('.getCode').on('click',function(){
				//电话号码格式
				getCheckedIpt('input.ipt_phone',telephone_all,'电话号码');
				if(flag){
					const params = {
						phone:phone_val
					}
					//postAction('/btms/openapi/Send',params);
				}
			});
			
			//获取行程
			$('.getSchedule').on('click',function(){
				//电话号码格式
				getCheckedIpt('input.ipt_phone',telephone_all,'电话号码');
				//验证码格式
				getCheckedIpt('input.ipt_code',idNo_code,'验证码');
				if(flag){
					const params = {
						phone:phone_val,
						code:code_val
					}
					//postAction('/btms/openapi/Select',params);
				}
			});
			
			//提交信息
			$('.registe').on('click',function(){
				if(checkInputNull($('.form_box'))){//如果进去了会返回true,并且必填的标签会加上error类
			       alert('还有必填项未填写，请先填写完整')
			        return false;
				}
				  //身份证格式
				getCheckedIpt('input.ipt_idNo',idNo_code,'身份证');
				//电话号码格式
				getCheckedIpt('input.ipt_phone',telephone_all,'电话号码');
				//验证码格式
				getCheckedIpt('input.ipt_code',idNo_code,'验证码');
				if(flag){ //电话格式，身份证，验证码
					const params = $('#form_box').serialize()
					//postAction('/btms/openapi/registerCustomer',params);
				}
			});
			
		})
	</script>
</html>